.active-modal {
	.active-modal-bg {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		height: 100%;
		z-index: 10007;
		background: #000000;
		opacity: 0.57;
	}
	.active-modal-content {
		position: fixed;
		overflow: auto;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		height: 100%;
		z-index: 10008;
		-webkit-overflow-scrolling: touch;
		outline: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateZ(1px);
		.modal-content-detail {
			width: 66%;
			img {
				width: 100%;
				margin-top: 0.5rem;
			}
			.close {
				width: 0.65rem;
				height: 0.65rem;
				background-image: url("../../images/active-close.png");
				background-repeat: no-repeat;
				background-size: 100%;
				float: right;
				margin-left: 0.6rem;
			}
			.btns-content {
				margin-top: -0.6rem;
				position: relative;
				span {
					font-weight: bold;
					font-size: 0.36rem;
					text-align: center;
					width: 3.4rem;
					height: 0.8rem;
					line-height: 0.9rem;
					display: block;
					margin: 0 auto;
					color: #c1c1c1;
					border: 2px solid #cccccc;
					border-radius: 0.45rem;
					margin-bottom: 0.32rem;
					&.primary {
						color: #a62125;
						background: linear-gradient(0deg, #ffeed4, #f1c37f, #f2ce96);
						border: none;
					}
				}
			}
		}
	}
}
